<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Farmacias Santa Martha</title>
        <h:outputStylesheet library="css" name="main.css" />
        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
    </h:head>
    <h:body styleClass="fondo">
        <h:form>
            <div style="width: 100%; background-color: white;">
                <table border="0" width="100%">
                    <tr>
                        <td style="color: crimson; font-family: 'Oswald', sans-serif; font-size: 42px; display:table-cell; vertical-align: middle; padding-left: 8px;" valign="middle">FARMACIAS SANTA MARTHA</td>
                        <td style="font-family: 'Open Sans Condensed', sans-serif; font-size: 22px; display:table-cell; vertical-align: middle; padding-right: 8px;" valign="middle" align="right"><img src="resources/imagenes/ecuador_flag.png" width="24" height="16" alt="ecuador_flag"/>&nbsp;Manta, Ecuador</td>
                    </tr>
                </table>
            </div>
            <div class="login" style="width: 300px;">
                <table border="0" width="250" style="background-color: white;" cellpadding="4" cellspacing="4">
                    <tr>
                        <td style="color: cornflowerblue; font-family: 'Oswald', sans-serif; font-size: 36px; display:table-cell; vertical-align: middle; padding-left: 8px;">Log In</td>
                    </tr>
                    <tr>
                        <td>
                            <h:messages styleClass="error"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="font-family: 'Open Sans Condensed', sans-serif; font-size: 18px; display:table-cell; vertical-align: middle; padding-right: 8px;">Usuario</td>
                    </tr>
                    <tr>
                        <td style="padding-left: 8px;">
                            <p:inputText value="#{usuarioMB.nombre}"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="font-family: 'Open Sans Condensed', sans-serif; font-size: 18px; display:table-cell; vertical-align: middle; padding-right: 8px;">Contrase&ntilde;a</td>
                    </tr>
                    <tr>
                        <td style="padding-left: 8px;">
                            <p:password value="#{usuarioMB.password}"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left: 8px;">
                            <p:commandButton value="Log In" id="nonAjax" action="#{usuarioMB.autenticar}" ajax="false" />
                        </td>
                    </tr>
                    <tr>
                        <td style="font-family: 'Open Sans Condensed', sans-serif; font-size: 18px; display:table-cell; vertical-align: middle; padding-right: 8px;"><a href="">Recuperar contrase&ntilde;a</a></td>
                    </tr>
                </table>
            </div>
        </h:form>
    </h:body>
</html>